
<!DOCTYPE html>

<html>
  <head>
    <title>/ascii/</title>
  </head>

  <style>
    body {
      position: relative;
      font-family: sans-serif;
      width: 800px;
      margin: 0 auto;
      padding: 10px;
    }

    .error {
      color: red
    }

    .map {
      position: absolute;
      right: 0;
      top: 112px;;
    }

    label {
      display: block;
      font-size: 20px;
    }

    input[type=text] {
      width: 400px;
      font-size: 20px;
      padding: 2px;
    }

    textarea {
      width: 400px;
      height: 200px;
      font-size: 17px;
      font-family: monospace;
    }

    input[type=submit] {
      font-size: 24px;
    }

    hr {
      margin: 20px auto;
    }

    .art + .art {
      margin-top: 20px;
    }

    .art-title {
      font-weight: bold;
      font-size: 20px;
    }

    .art-body {
      margin: 0;
      font-size: 17px;
    }

  </style>

  <body>
    <h1>/ascii/</h1>

    <form method="post">
      <label>
        <div>title</div>
        <input type="text" name="title" value="">
      </label>

      <label>
        <div>art</div>
        <textarea name="art"></textarea>
      </label>

      <div class="error"></div>

      <input type="submit">
    </form>
		
		{% if img_url %}
			<img class="map" src="{{img_url}}">
		{% endif %}
		
		<hr>
		
		{% for art in arts %}
			<div class="art">
				<div class="art-title">{{art.title}}</div>
				<pre class="art-body">{{art.art}}</pre>
			</div>
		{% endfor %}
		
  </body>
</html>